<template>
  <div class="consult-page">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <!--<img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left-white.png"-->
               <!--@click="onClickGoBack()"/>-->
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#FFFFFF">在线咨询</span>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="consult-container" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="vip-tip flex-row-space-between" style="height: 44px; z-index: 10000;position: absolute"
           v-if="!userVip">
        <span>您当前是普通用户,升级会员获更多特权</span>
        <div @click="goToVipPage">升级VIP</div>
      </div>
      <div class="clear-20 h-44" v-if="!userVip"></div>

      <div class="consult-img-box flex-center">
        <img class="consult-img" :src="hospital.consult_img_url"/>
      </div>

      <div class="clear-20"></div>
      <div class="flex-center title-desc">
        请确认您的主治医生
      </div>

      <swiper indicator-dots="true" indicator-active-color="#68DDED" :display-multiple-items="1">
        <swiper-item class="flex-center" v-for="consult in consultList" :key="i">
          <div class="item flex-col-center" :class="{'active':consult[0].id===selectedConsult.id}"
               v-if="consult[0]" @click="onClickChooseConsult(consult[0])">
            <!--<div class="avatar-box">-->
            <img class="avatar"
                 :src="consult[0].avatar_url?consult[0].avatar_url:'/static/assets/img/icon_default_avatar.png'"/>
            <!--<div class="mask"></div>-->
            <!--</div>-->
            <div class="name">{{consult[0].name}}</div>
          </div>
          <div class="item flex-col-center" :class="{'active':consult[1].id===selectedConsult.id}"
               v-if="consult[1]" @click="onClickChooseConsult(consult[1])">
            <!--<div class="avatar-box">-->
            <img class="avatar"
                 :src="consult[1].avatar_url?consult[1].avatar_url:'/static/assets/img/icon_default_avatar.png'"/>
            <!--<div class="mask"></div>-->
            <!--</div>-->
            <div class="name">{{consult[1].name}}</div>
          </div>
          <div class="item flex-col-center" :class="{'active':consult[2].id===selectedConsult.id}"
               v-if="consult[2]" @click="onClickChooseConsult(consult[2])">
            <!--<div class="avatar-box">-->
            <img class="avatar"
                 :src="consult[2].avatar_url?consult[2].avatar_url:'/static/assets/img/icon_default_avatar.png'"/>
            <!--<div class="mask"></div>-->
            <!--</div>-->
            <div class="name">{{consult[2].name}}</div>
          </div>
        </swiper-item>
      </swiper>

      <view
        class="chat-msg"
        scroll-y="true"
        :style="{top: titleH + statusH + (!userVip ? 44 : 0) + 'px'}"
        :class="{'chat-msg-short':isShowChatExt}"
        :scroll-into-view="toView">
        <div class="tip" :style="{'padding-top': 15 + 'px'}">
          <div v-show="!isHasSelectedFirst">您好，请您先在页面上方的医生选项中选择您的主治医生，如果没有您的主治医生，请点击选择互联网医生。</div>
        </div>
      </view>

      <div class="flex-center">
        <button class="btn" open-type="contact">点击咨询</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Core from "core";
  import global from "global";
  import Common from "common";

  export default {
    components: {},
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        user: "",
        username: {},
        consultList: [],
        selectedConsult: "",
        desc: "",
        hospital: "",
        isHasSelectedFirst: false,
        userVip: {}
      };
    },
    mounted () {
      this.getConsultList();
      this._getVipInfo();
    },
    methods: {
      getConsultList () {
        let hosptalId = Core.Data.getHospitalId();
        Core.Api.Hospital.getConsultList(hosptalId)
          .then(res => {
            this.hospital = res.hospital;
            if (res.consult_list.length == 0) {
              this.consultList.push(res.internet_doctor);
            } else {
              this.consultList = Core.Util.array_to_dyadic_array(res.consult_list, 2);
              l: for (let i in this.consultList) {
                let list = this.consultList[i];
                for (let j in list) {
                  if (!list[j]) {
                    list[j] = res.internet_doctor;
                    break;
                  } else {
                    if (j == 1) {
                      list.push(res.internet_doctor);
                    }
                  }
                }
              }
            }
          })
          .catch(err => {
            Core.Util.showTip("", err.message);
          });
      },

      _getVipInfo () {
        Core.Api.VIP.vipInfo()
          .then(res => {
            let userVip = res.user_vip;
            if (userVip) {
              userVip.beginTime = Core.Util.timeFormat(userVip.begin_time, "Y.m.d");
              userVip.endTime = Core.Util.timeFormat(userVip.end_time, "Y.m.d");
            }
            this.userVip = userVip;
          });
      },

      onClickChooseConsult (consult) {
        this.selectedConsult = consult;
      }
    },

    onShow () {
      // this.isShowChatExt = false;
      // this.isShowDialog = false;
      let self = this;
      if (!Common.isLogin()) {
        wx.showModal({
          title: "",
          content: "您还未登录",
          showCancel: false
        });
      } else {
        self.user = Core.Data.getUser();
        self.desc = self.user.user_track ? `您是${self.user.user_track.doctor_name}医生的患者` : "请确定您的主治医生";
        this.getConsultList();
        this._getVipInfo();
      }
    },

    created () {

    }
  };
</script>

<style lang="scss" scoped>
  .consult-page {
    width: 100%;
    height: 100%;
    position: relative;
    background: #F9F9F9;

    .nav-bar {
      background: linear-gradient(to right, #84C5FD, #64DEEB);
    }

    .consult-container {
      width: 100%;
      height: 100%;
      position: relative;

      .vip-tip {
        width: 100%;
        padding: 0 10px;
        background: #FFFFFF;

        span {
          color: #939393;
          font-size: 14px;
          font-weight: 300;
        }

        div {
          width: 72px;
          height: 31px;
          border-radius: 36px;
          border: 1px solid #5BD4E7;
          color: #5BD4E7;
          font-size: 14px;
          text-align: center;
          line-height: 31px;
          font-weight: 300;
        }
      }

      .chat-msg {
        .tip {
          padding-left: 20px;
          padding-right: 20px;

          div {
            font-size: 15px;
            color: #A6A6A6;
            background: #EEEEEE;
            padding: 10px;
            border-radius: 8px;
            line-height: 1.3;

          }

          div + div {
            margin-top: 10px;
          }
        }

        .message {
          width: 100%;
          height: auto;
          padding: 10px 15px;
        }

        .time {
          margin: 7px 0;
          text-align: center;
          .time-text {
            display: inline-block;
            padding: 3px 10px 0 10px;
            font-size: 12px;
            color: #fff;
            line-height: 14px;
            border-radius: 2px;
            background-color: #dcdcdc;
          }
        }

        .user {
          .user-text {
            margin: auto auto 4px 0;
            font-size: 12px;
            color: #dcdcdc;
            display: block;
          }
        }

        .user-avatar {
          width: 30px;
          height: 30px;
          margin: 0 10px 0 0;
          border-radius: 15px;
          float: left;
        }

        .msg {
          display: inline-block;
          padding: 5px 10px;
          max-width: calc(85% - 40px);
          font-size: 14px;
          overflow: hidden;
          text-align: left;
          word-break: break-all;
          background-color: #EDEDED;
          border-radius: 4px;

          .msg-text {
            line-height: 1.5;
          }
          .msg-img {
            width: 90px;
            height: 120px;
            margin: 2px auto;
          }
        }

        .msg:before {
          content: " ";
          position: absolute;
          top: 9px;
          right: 100%;
          border: 6px solid transparent;
          border-right-color: #EDEDED;
        }

        .self {
          text-align: right;

          .user-avatar {
            float: right;
            margin: 0 0 0 10px;
          }
          .user {
            margin: auto 2px 4px auto;
            font-size: 12px;
            color: #dcdcdc;
          }
          .msg {
            background-color: #b2e281;
          }
          .msg:before {
            right: inherit;
            left: 100%;
            border-right-color: transparent;
            border-left-color: #b2e281;
          }
        }
      }

      .chat-msg-short {
        bottom: 299px;
      }

    }

    .dialog-box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 20000;

      .dialog {
        width: 80%;
        background: #FFFFFF;
        border-radius: 4px;
        padding-top: 15px;
        max-width: 270px;

        .desc {
          margin-top: 20px;
          font-size: 16px;
          color: #999999;
          padding: 0 20px;
          text-align: center;
        }

        .operation {
          width: 100%;
          margin-top: 20px;
          height: 45px;
          border-top: 1px solid #DEDEDE;

          .left {
            border-right: 1px solid #DEDEDE;
            height: 100%;
          }
          .right {
            height: 100%;

            .contact-btn {
              color: rgb(58, 197, 21);
              background: #ffffff;
              outline: none;
              border: none;
              font-size: 16px;
              line-height: 44px;
              &::after {
                border: none;
              }
            }
          }
        }
      }
    }

    swiper {
      width: 100%;
      height: 150px;
    }

    .item:first-child {
      margin-left: 0;
    }

    .item {
      margin-left: 30px;
      min-width: 70px;

      .avatar {
        width: 60px;
        height: 60px;
        border: 1px solid #cccccc;
        border-radius: 50%;
      }

      .name {
        margin-top: 10px;
        font-size: 16px;
        color: #3a3a3a;
      }
    }

    .active {
      .avatar {
        border: 3px solid #68DDED;
      }
      .name {
        color: #68DDED;
      }
    }

    .h-44 {
      height: 44px;
    }

    .consult-img-box {
      margin-top: 20px;
      .consult-img {
        width: 327px;
        height: 90px;
        border-radius: 10px;
      }
    }

    .title-desc {
      font-size: 18px;
      letter-spacing: 1px;
      color: #555555;
    }

    .btn {
      width: 119px;
      height: 37px;
      margin-top: 40px;
      margin-bottom: 37px;
      color: #FFFFFF;
      font-size: 16px;
      font-weight: 300;
      border-radius: 18px;
      text-align: center;
      line-height: 37px;
      background: linear-gradient(to right, #84C5FD, #65DEEB);
    }
  }
</style>
